<template>
  <view>
    <view style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #FBF3E1;">
    </view>
    <s-layout class="chat-wrap" color="#000000" navbar="inner"
              :is_main-body="true" :is_header="false"
              :customBody="customBody()" :is_mainBody="false"
              :is_back="true" backgroundColor="transparent"
              :bg-style="{
              color:'#FBF3E1'
            }"
    >
      <view class="wh_750" style="height: 100vh;">
        <view style="width: 750rpx;height: 100vh;position: relative">
          <image :src="`${sq_image_path}/chineseSurname/brave_header.png`"
                 class="wh_350"
                 style="height:830rpx;position: absolute;bottom: 590rpx;left: 50%;transform: translateX(-50%)"
          ></image>
          <view class="wh_450 hW_200 flex flex-column align-center justify-center center_bg"
                style="position: absolute;bottom: 400rpx;left: 50%;transform: translateX(-50%)"
          >
            <view class="fs_26 color_4B4B4B fw_bold">
              {{ state.data.surname }}
            </view>
            <view class="fs_21 color_4B4B4B fw_500">
              {{ state.data.ancestors }}
            </view>
          </view>
          <image :src="`${sq_image_path}/chineseSurname/brave_bottom.png`"
                 class="wh_750 hW_500"
                 style="position: absolute;bottom: 0;left: 50%;transform: translateX(-50%)"
          ></image>
          <view class="brave_bottom wh_750 hW_500"
                style="position: absolute;bottom: 0;left: 50%;transform: translateX(-50%)"
          >
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower1" v-if="state.data.flower > 0">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower2" v-if="state.data.flower > 1">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower3" v-if="state.data.flower > 2">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower4" v-if="state.data.flower > 3">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower5" v-if="state.data.flower > 4">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower6" v-if="state.data.flower > 5">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower7" v-if="state.data.flower > 6">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower8" v-if="state.data.flower > 7">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower9" v-if="state.data.flower > 8">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower11" v-if="state.data.flower > 9">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower12" v-if="state.data.flower > 10">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower13" v-if="state.data.flower > 11">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower14" v-if="state.data.flower > 12">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower15" v-if="state.data.flower > 13">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower16" v-if="state.data.flower > 14">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower17" v-if="state.data.flower > 15">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower18" v-if="state.data.flower > 16">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower19" v-if="state.data.flower >17">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower21" v-if="state.data.flower > 18">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower22" v-if="state.data.flower > 19">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower23" v-if="state.data.flower > 20">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower24" v-if="state.data.flower > 21">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower25" v-if="state.data.flower > 22">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower26" v-if="state.data.flower > 23">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower27" v-if="state.data.flower > 24">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower28" v-if="state.data.flower > 25">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
            <view @click.stop="goWorship(1)" class="wh_63 hW_63 flower29" v-if="state.data.flower > 26">
              <image :src="`${sq_image_path}/chineseSurname/jiapu_flowerBg.png`"></image>
            </view>
          </view>
        </view>


        <!-- 顶部浮窗 -->
        <view class="wh_702 hW_167 flex align-center justify-between fixedTop" @click="goWorship(2)"
              style="border-radius: 8rpx">
          <view class="wh_646 hW_147 ml_10 flex" style="overflow: hidden">
            <scrolling ref="scrolling" :list="page.commentList" class="flex flex-sub"></scrolling>
          </view>
          <!-- 弹幕 -->
          <view class="fs_26 color_FFFFFF fw_500 wh_26 ml_10 mr_10">
            动态详情
          </view>
        </view>
        <!-- 底部浮窗 -->
        <view class="wh_682 hW_125 bg_FFFFFF bottomBar flex align-center justify-around">
          <view class="flex flex-column align-center" style="position: relative"
                @click.stop="worshipAncestorsAndPraise">
            <image class="wh_39 hW_35"
                   :src="state.data.is_like == 1 ? `${sq_image_path}/chineseSurname/sq_thumbsUp_select.png`:`${sq_image_path}/chineseSurname/sq_thumbsUp.png`"></image>
            <view class="fs_18 fw_500 color_3B3B3B ss-m-t-5">点赞 {{ state.data.likes }}</view>
            <image :src="`${sq_image_path}/index/dianzan_gif.gif`" v-if="state.showGif" class="gif"></image>
          </view>
          <view class="centerBar wh_87 hW_87 bg_FFFFFF flex flex-column align-center justify-center"
                @click.stop="presentABouquet"
          >
            <image class="wh_44 hW_44"
                   :src="`${sq_image_path}/chineseSurname/sq_sceneShooting.png`"></image>
            <view class="fs_18 fw_500 color_3B3B3B ss-m-t-5">献花</view>
          </view>
          <view class="flex flex-column align-center" @click.stop="openComment">
            <image class="wh_39 hW_35"
                   :src="`${sq_image_path}/chineseSurname/sq_leaveMessage.png`"></image>
            <view class="fs_18 fw_500 color_3B3B3B ss-m-t-5">留言 {{ page.commentTotal }}</view>
          </view>
        </view>

        <view class="photoDetails_comments flex align-end justify-between z_4" :style="{
      bottom:state.commentsHeight+'px'
    }" v-if="state.commentsShow">
          <view class="photoDetails_comments_left ml_24">
        <textarea class="photoDetails_comments_left_input"
                  v-model="state.commentsValue" :focus="state.commentsFocus"
                  @blur="commentBlur"
                  placeholder="评论" :adjust-position="false" maxlength="200" auto-height></textarea>
          </view>
          <view class="photoDetails_comments_right mr_24 flex align-center justify-center" :style="{
       background: state.commentsValue == '' ? '#9F9F9F' : '#FF6D00'
      }" @click.stop="publishComments">
            <text class="photoDetails_comments_right_text">完成</text>
          </view>
        </view>
      </view>
    </s-layout>
  </view>
</template>

<script setup>
  import { onLoad, onReady, onUnload } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import { computed, nextTick, onMounted, reactive } from 'vue';
  import Scrolling from '@/pages/chineseSurname/components/scrolling.vue';
  import { showAuthModal } from '@/sheep/hooks/useModal';

  const customBody = () => {
    return {
      'display': 'flex',
      'flex-direction': 'column',
      'align-items': 'center',
      'background': '#FBF3E1',
      'width': '750rpx',
      'position': 'fixed',
      'left': '50%',
      'top': 0,
      'transform': 'translateX(-50%)',
    };
  };
  const state = reactive({
    data: {},
    model: true,
    canvasImage: '',
    showGif: false,
    timeOut: null,
    commentsValue: '',
    commentsFocus: false,
    commentsShow: false,
    commentsHeight: 0,
  });
  const sq_image_path = computed(() => sheep.$store('AI').sq_image_path);
  const isLogin = computed(() => sheep.$store('user').isLogin);
  const page = reactive({
    options: {},
    commentList: [],
    commentTotal: [],
    commentPage: 1,
    commentPagesize: 10,
  });

  onLoad(async (options) => {
    page.options = options;
    uni.onKeyboardHeightChange(onKeyboardHeightChange);
    // #ifndef H5
    const { data } = await sheep.$api.surname.getSurnameDetail({ id: options.id });
    state.data = data;
    await getComment();
    // #endif
  });

  onMounted(async () => {
    // #ifdef H5
    const pages = getCurrentPages();
    const { data } = await sheep.$api.surname.getSurnameDetail({ id: pages[pages.length - 1].options.id });
    state.data = data;
    await getComment();
    // #endif
  });

  onUnload(() => {
    uni.offKeyboardHeightChange(onKeyboardHeightChange);
  });

  function goWorship(index = 0) {
    sheep.$router.go('/pages/chineseSurname/flowersMessageRecords', { id: state.data.id, type: 1, index });
  }

  // 获取评论
  async function getComment() {
    const { data } = await sheep.$api.surname.getSurnameComment({
      id: page.options.id,
      page: page.commentPage,
      pagesize: page.commentPagesize,
    });
    page.commentTotal = data.count;
    page.commentList = data.list;
  }

  async function worshipAncestorsAndPraise() {
    if (!isLogin.value) {
      showAuthModal();
      return;
    }
    const { code } = await sheep.$api.family.surnameClick({
      id: state.data.id,
    });
    if (code == 1) {
      if (!!state.timeOut) {
        clearTimeout(state.timeOut);
      }
      state.showGif = true;
      state.timeOut = setTimeout(() => {
        state.showGif = false;
        state.timeOut = null;
      }, 1000);
      state.data.likes += 1;
      state.data.is_like = 1;
    }
  }

  function onKeyboardHeightChange(res) {
    const { height, duration } = res;
    // 键盘弹起
    if (height > 0) {
      state.commentsHeight = height;
    }
    // 键盘收回
    else {
      state.commentsHeight = height;
    }
  }

  async function presentABouquet() {
    if (!isLogin.value) {
      showAuthModal();
      return;
    }
    const { code, msg } = await sheep.$api.surname.giveFlower({ id: state.data.id });
    state.data.flower += 1;
  }

  function commentBlur() {
    state.commentsFocus = false;
    setTimeout(() => {
      state.commentsShow = false;
    }, 1000);
  }

  function openComment() {
    if (!isLogin.value) {
      showAuthModal();
      return;
    }
    state.commentsShow = true;
    nextTick(() => {
      setTimeout(() => {
        state.commentsFocus = true;
      }, 100);
    });
  }

  async function publishComments() {
    if (state.commentsValue == '') {
      sheep.$helper.toast('请输入留言内容');
      return;
    }
    let { code, msg } = await sheep.$api.surname.surnameComment({
      id: state.data.id,
      content: state.commentsValue,
    });
    if (code == 1) {
      sheep.$helper.toast('留言成功');
      uni.$emit('setWorkingArea', state.commentsValue);
      state.commentsValue = '';
      // commentBlur();
      state.commentsShow = false;
      state.commentsFocus = false;
      state.data.comment++;
      page.commentTotal++;
    } else {
      sheep.$helper.toast(msg);
    }
  }
</script>


<style scoped lang="scss">
  .fixed {
    position: fixed;
    top: 0;
    left: 0;
  }

  .bottomBar {
    box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    opacity: 0.71;
    position: absolute;
    bottom: 46rpx;
    left: 50%;
    transform: translateX(-50%);
  }

  .centerBar {
    border: 2rpx solid #FF4206;
    border-radius: 50%;
  }

  .fixedTop {
    position: absolute;
    top: 220rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.50);
  }

  .center_bg {
    background: url($uni-bg-url-sq + '/chineseSurname/brave_center.png') no-repeat;
    background-size: 450rpx 200rpx;
  }

  .gif {
    position: absolute;
    top: -20rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 62rpx;
    height: 62rpx;
  }

  .brave_bottom {
    background: url($uni-bg-url-sq + '');
  }

  .flowersList {
    .flower {
      width: 38rpx;
      height: 38rpx;
    }
  }

  .flower1 {
    position: absolute;
    bottom: 420rpx;
    z-index: 10;
    left: 21%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower2 {
    position: absolute;
    bottom: 420rpx;
    z-index: 10;
    left: 28%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower3 {
    position: absolute;
    bottom: 420rpx;
    z-index: 10;
    left: 36%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower4 {
    position: absolute;
    bottom: 420rpx;
    z-index: 10;
    left: 44%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower5 {
    position: absolute;
    bottom: 420rpx;
    z-index: 10;
    left: 52%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower6 {
    position: absolute;
    bottom: 420rpx;
    z-index: 10;
    left: 60%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower7 {
    position: absolute;
    bottom: 420rpx;
    z-index: 10;
    left: 68%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower8 {
    position: absolute;
    bottom: 420rpx;
    z-index: 10;
    left: 76%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower9 {
    position: absolute;
    bottom: 420rpx;
    z-index: 10;
    left: 84%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower11 {
    position: absolute;
    bottom: 380rpx;
    z-index: 10;
    left: 21%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower12 {
    position: absolute;
    bottom: 380rpx;
    z-index: 10;
    left: 28%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower13 {
    position: absolute;
    bottom: 380rpx;
    z-index: 10;
    left: 36%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower14 {
    position: absolute;
    bottom: 380rpx;
    z-index: 10;
    left: 44%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower15 {
    position: absolute;
    bottom: 380rpx;
    z-index: 10;
    left: 52%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower16 {
    position: absolute;
    bottom: 380rpx;
    z-index: 10;
    left: 60%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower17 {
    position: absolute;
    bottom: 380rpx;
    z-index: 10;
    left: 68%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower18 {
    position: absolute;
    bottom: 380rpx;
    z-index: 10;
    left: 76%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower19 {
    position: absolute;
    bottom: 380rpx;
    z-index: 10;
    left: 84%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower21 {
    position: absolute;
    bottom: 340rpx;
    z-index: 10;
    left: 21%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower22 {
    position: absolute;
    bottom: 340rpx;
    z-index: 10;
    left: 28%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower23 {
    position: absolute;
    bottom: 340rpx;
    z-index: 10;
    left: 36%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower24 {
    position: absolute;
    bottom: 340rpx;
    z-index: 10;
    left: 44%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower25 {
    position: absolute;
    bottom: 340rpx;
    z-index: 10;
    left: 52%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower26 {
    position: absolute;
    bottom: 340rpx;
    z-index: 10;
    left: 60%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower27 {
    position: absolute;
    bottom: 340rpx;
    z-index: 10;
    left: 68%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower28 {
    position: absolute;
    bottom: 340rpx;
    z-index: 10;
    left: 76%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .flower29 {
    position: absolute;
    bottom: 340rpx;
    z-index: 10;
    left: 84%;
    transform: translateX(-50%);

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .photoDetails_comments {
    width: 750rpx;
    background: #FFFFFF;
    padding: 22rpx 0 42rpx 0;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;

    .photoDetails_comments_left {
      width: 540rpx;
      //height: 80rpx;
      background: #FFFFFF;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      border: 1rpx solid #707070;
      padding: 20rpx 20rpx 20rpx 20rpx;

      .photoDetails_comments_left_input {
        width: 537rpx;
        min-height: 40rpx;
        max-height: 150rpx;
      }
    }

    .photoDetails_comments_right {
      width: 115rpx;
      height: 80rpx;
      background: #9F9F9F;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      //border: 1rpx solid #707070;

      .photoDetails_comments_right_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 23rpx;
        color: #FFFFFF;
      }
    }
  }
</style>
